<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      @submit.native.prevent
      class="demo-form-inline"
    >
      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="输入用户昵称" @keyup.native.enter="onSubmit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider content-position="left">用户列表</el-divider>

    <!-- 表格 -->
    <el-table :data="employees">
      <el-table-column label="头像" width="120px" align="center" >
        <!--  
          slot-scope="scope" 来取得作用域插槽:data绑定的数据,
          scope可以随便替换其他名称,只是定义对象来代表取得的data数据,便于使用 
          相当于定义插槽, 可以访问.row.pic拿到每一行对象的属性, 固定写法
        -->
        <template slot-scope="scope">
          <img :src="scope.row.src" width="60px" alt="" class="imgs_1">
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column label="性别" prop="sex" align="center">
      </el-table-column>
      <el-table-column
        label="年龄"
        prop="age"
        width="150px"
        align="center"
      ></el-table-column>
      <el-table-column label="地区" prop="city" align="center">
      </el-table-column>
      <el-table-column label="手机号" prop="phone" align="center">
      </el-table-column>
      <el-table-column label="电子邮箱" prop="email" align="center">
      </el-table-column>
      <el-table-column label="职位" prop="post" align="center">
      </el-table-column>
      <el-table-column label="操作" width="176px" align="center">
        <template slot-scope="scope">
          <el-button @click="openright(scope.row.id)" type="warning" icon="el-icon-edit" style="margin-right: 10px" circle>
          </el-button>
          <el-drawer
            title="修改用户信息"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
            style="color: #666; font-size: 25px"
          >
            <el-divider></el-divider>
            <el-form
              ref="form2"
              :model="form2"
              label-width="80px"
              style="width: 300px"
            >
            <img :src="form2.src" alt="加载失败" width="50px" class="imgs_2">
            <el-form-item label="头像">
                <el-input v-model="form2.src" placeholder="请输入头像路径" />
              </el-form-item>
              <el-form-item label="职位">
                <el-input v-model="form2.post" placeholder="请输入职位" />
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="form2.name" placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item label="性别">
                <el-input v-model="form2.sex" placeholder="请输入性别" />
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="form2.age" placeholder="请输入年龄" />
              </el-form-item>
              <el-form-item label="地区">
                <el-input v-model="form2.city" placeholder="请输入地区(城市)" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form2.phone" placeholder="请输入手机号码" />
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="form2.email" placeholder="请输入邮箱" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit(form2.id)"
                  >立即修改</el-button>
              </el-form-item>
            </el-form>
          </el-drawer>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="DelItem(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      employees: [],
      form: {
        name: "", //
      },
      form2: {},
    };
  },

  methods: {
    openright(id) {
      this.drawer = true;
      this.$http.employeesApi.queryById({ id }).then((res) => {
        this.form2 = res.data.data[0];
      });
    },
    handleClose(done) {
      this.drawer = false;
    },
    submit(id) {
      this.$http.employeesApi.update(this.form2).then((res) => {
        console.log(res)
        this.drawer = false;
        this.$http.employeesApi.queryAll().then((res) => {
              this.employees= res.data.data;
            });
      });
    },
    onSubmit() {
      if (this.form.name !== "") {
        // 当点击查询之后 执行的代码
        let params = { name: this.form.name };
        this.$http.employeesApi.queryAllByName(params).then((res) => {
          if (res.data.data == "") {
            return this.$message({
              message: "非常可惜 , 没有找到哦~",
              type: "warning",
            });
          }
          // 替换
          this.employees = res.data.data;
        });
      }
    },
    DelItem(id) {
      this.$confirm("该操作删除，是否继续？", "提示", {
        type: "warning",
      }).then(() => {
        // 执行删除业务
        this.$http.employeesApi.delete({ id }).then((res) => {
          if (res.data.code == 200) {
            this.$message({ message: "删除完成", type: "success" });
            this.$http.employeesApi.queryAll().then((res) => {
              this.employees= res.data.data;
            });
          }
        });
      });
    },
  },

  mounted() {
    this.$http.employeesApi.queryAll().then((res) => {
      console.log(res);
      this.employees = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.imgs_1{
  border-radius: 50%;
}
.imgs_2{
  border-radius: 50%;
  margin-left: -100px;
}
</style>
